<!-- 忘记密码弹窗 -->
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.forgot-password-modal {
  width: 100%;
  height: 100%;
  background-image: $color-forgot-password-gradient;
  position: fixed;
  top: 0;
  left: 0;

  .forgot-password-top {
    width: 90%;
    height: .4267rem;
    margin: 0 auto;
    margin-top: .5rem;
    @include flex-space-between-center;
    margin-bottom: 20px;
    color: $color-gray;

    span {
      font-size: .4733rem;
    }

    p {
      font-size: .4267rem;
    }
  }

  .forgot-password-center {
    width: 90%;
    height: 1.8667rem;
    margin: 0 auto;
    margin-bottom: 20px;
    color: $color-gray;
    @include flex-center;
    flex-direction: column;
    margin-top: 3.4667rem;

    h4 {
      @include h4-font-size;
      font-weight: $font-weight-500;
      color: $color-login-title-blue;
    }

    p {
      font-size: .4267rem;
      color: $color-login-title-blue;

      i {
        color: $color-forgot-i;
        @include i-font-size;
      }
    }
  }

  .forgot-code {
    width: 70%;
    height: 1.2rem;
    margin: 0 auto;
    margin-bottom: 20px;
    color: $color-gray;
    @include flex-center;
    background: rgba(238, 238, 238, 0.36);
    border-radius: $border-radius-5px;
    overflow: hidden;

    input {
      width: 70%;
      height: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      border: 0;
      margin-right: 2%;
      background: rgba(255, 255, 255, 0.3);
      font-size: .4267rem;
      @include input-focus-outline-none;
    }

    button {
      width: 28%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      color: #fff;
      @include border-0;
    }
  }

  .forgot-new-password {
    width: 70%;
    height: 1.2rem;
    margin: 0 auto;
    margin-bottom: 20px;
    color: $color-gray;
    @include flex-center;
    border-radius: $border-radius-5px;
    overflow: hidden;

    input {
      width: 100%;
      height: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      border: 0;
      background: rgba(255, 255, 255, 0.3);
      @include input-focus-outline-none;
      font-size: .4267rem;
    }
  }

  .forgot-password-bottom {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: 1.4667rem;
    border-radius: $border-radius;
    position: relative;

    button {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      @include border-0;
      border-radius: $border-radius;
      background-color: $color-forgot-password-btn;
      color: rgba(148, 53, 162, 0.85);
    }
  }
}

@keyframes forgot-password-fade-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.forgot-password-enter-active {
  animation: forgot-password-fade-in 0.3s ease-in-out;
}

@keyframes forgot-password-fade-out {
  from {
    // opacity: 1;
    transform: translateX(0);
  }

  to {
    // opacity: 0;
    transform: translateX(100%);
  }
}

.forgot-password-leave-active {
  animation: forgot-password-fade-out 0.3s ease-in-out;
}
</style>
<template>
  <Transition name="forgot-password">
    <teleport to="body" v-if="forgotPasswordStore.showForgotPasswordModal">
      <div class="forgot-password-modal">
        <div class="forgot-password-top">
          <span @click="forgotPasswordStore.hideForgotPassword"><i class="iconfont icon-fanhui"></i></span>
          <p></p>
        </div>
        <div class="forgot-password-center">
          <h4>找回密码</h4>
          <p>输入<i>111</i>收到的6位验证码</p>
        </div>
        <div class="forgot-code">
          <input type="text" name="" id="" placeholder="输入邮箱验证码" class="forgot-password-code" v-model="formForgot.code">
          <button>获取验证码</button>
        </div>
        <div class="forgot-new-password">
          <input type="password" name="" id="" placeholder="输入新密码" class="forgot-password-new-password"
            v-model="formForgot.password">
        </div>
        <div class="forgot-password-bottom">
          <button @click="handleUpdatePassword"><i class="iconfont icon-dui"></i></button>
        </div>
      </div>
    </teleport>
  </Transition>
</template>
<script setup>
import { useForgotPasswordStore } from '@/store/modules/login/ForgotPassword'
import { updatePasswordApi } from '@/api/login/Forgot'
const forgotPasswordStore = useForgotPasswordStore()
const formForgot = reactive({
  email: '',
  code: '',
  password: ''
})

const handleUpdatePassword = async () => {
  try {
    const res = await updatePasswordApi({
      email: forgotPasswordStore.email,
      code: formForgot.code,
      password: formForgot.password
    })
    console.log(res);
    if (res.code === 200) {
      // 密码更新成功
      // 隐藏忘记密码组件
      forgotPasswordStore.hideForgotPassword()
      // 清空表单数据
      formForgot.code = ''
      formForgot.password = ''
    }
  } catch (error) {
    console.error('更新密码失败', error)
  }
}

</script>
